<template>
	<view class="commenmoration">
		<scroll-view scroll-y="true" enable-back-to-top="true" show-scrollbar="false" @scrolltolower="fetchItems">
			<LatestItem :latestItem="latestItem"></LatestItem>
			<item v-for="(item, index) in items" :key="index" :item="item"></item>
		</scroll-view>
		<uni-fab ref="fab" :pattern="patten" horizontal="right" vertical="bottom" direction="vertical"
			@fabClick="addCommenmoration" />
	</view>
</template>

<script>
	import {
		reactive
	} from 'vue'
	import LatestItem from './components/LatestItem.vue'
	import item from './components/item.vue'

	export default {
		components: {
			LatestItem,
			item
		},
		setup() {
			const patten = reactive({
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#fc3f3f',
				buttonColor: '#59c364',
				iconColor: '#fff'
			})
			const fetchItems = () => {

			}
			const addCommenmoration = () => {

			}
			const latestItem = reactive({
				name: '第一次拥抱',
				displayType: true,
				days: 286,
				time: '2021年08月12日'
			})
			const items = reactive([{
					type: 0,
					name: '我的生日',
					displayType: 0,
				},{
					type: 0,
					name: 'ta的生日',
					displayType: 0,
				},{
					type: 1,
					name: '第一次牵手',
					displayType: 1,
					days: 200
				},{
					type: 1,
					name: '第一次接吻',
					displayType: 1,
					days: 108
				}
			])

			return {
				patten,
				latestItem,
				items,
				addCommenmoration,
				fetchItems
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commenmoration {
		background-color: rgb(235, 84, 95);
		height: 100vh;
		padding: 60rpx 40rpx 0.01rpx;
		display: flex;
		flex-direction: column;
	}

	:deep(.uni-fab__plus) {
		bottom: 100rpx;
	}
</style>
